package com.boxing;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.nio.charset.StandardCharsets;


// 在urlPatterns 配置路径时 必须有 /  "/" 代表 http://ip:端口号/工程路径/
@WebServlet(name = "MyServlet", urlPatterns = "/myServlet",
        initParams={@WebInitParam(name = "encode" ,value="UTF-8")})
public class MyServlet extends HttpServlet {

    @Override
    public void init(ServletConfig config) throws ServletException {
        super.init(config);
        System.out.println("MyServlet init 方法执行了");
        String encode = config.getInitParameter("encode");
        System.out.println("MyServlet初始化时配置的参数 encode:" +encode);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置请求的编码方式, 必须在从request中读数据前设置
        req.setCharacterEncoding(StandardCharsets.UTF_8.toString());
        String characterEncoding1 = resp.getCharacterEncoding();
        System.out.println("servlet 默认编码方式111 "+characterEncoding1);
        // 设置响应体的编码方式
//        resp.setCharacterEncoding(StandardCharsets.UTF_8.toString());
//        resp.setHeader("Content-Encoding", "UTF-8");

        // 相当与设置了 req.setCharacterEncoding(StandardCharsets.UTF_8.toString());
        resp.setContentType("text/html;charset=utf-8");

        System.out.println("doGet 方法执行了");
        String name = req.getParameter("name");
        System.out.println("获取到name 的值是:"+name);

        ServletContext servletContext = req.getServletContext();
        servletContext.setAttribute("scKey", "scValue");
        System.out.println("MyServlet servletContext:" +servletContext);


        // 获取工程的绝对路径
        String realPath = servletContext.getRealPath("/");
        // 获取工程名称
        String contextPath1 = servletContext.getContextPath();
        System.out.println("项目的 realPath:"+realPath +"  工程名称  " + contextPath1);

        String contextPath = req.getContextPath();
        String servletPath = req.getServletPath();
        String requestURI = req.getRequestURI();
        String requestURL = req.getRequestURL().toString();
        String remoteAddr = req.getRemoteAddr();
        System.out.println("getContextPath "+contextPath);
        System.out.println("getServletPath "+servletPath);
        System.out.println("getRequestURI "+requestURI);
        System.out.println("getRequestURL "+requestURL);
        System.out.println("getRemoteAddr "+remoteAddr);
        String characterEncoding = req.getCharacterEncoding();
        System.out.println("servlet 默认编码方式 "+characterEncoding);


        resp.getWriter().printf("<!DOCTYPE html>\n" +
                "<html lang=\"en\">\n" +
                "<head>\n" +
                "    <meta charset=\"UTF-8\">\n" +
                "    <title>"+name+"</title>\n" +
                "    <style>\n" +
                "        .root{\n" +
                "            margin-top: 150px;\n" +
                "        }\n" +
                "        #errorHint{\n" +
                "            visibility: hidden;\n" +
                "            margin-left: auto;\n" +
                "            margin-right: auto;\n" +
                "            margin-bottom: 10px;\n" +
                "            font-size: 12px;\n" +
                "            width: 302px;\n" +
                "            height: 23px;\n" +
                "            line-height: 23px;\n" +
                "            padding-left: 40px;\n" +
                "            box-sizing: border-box;\n" +
                "            color: #E5383C;\n" +
                "            background-color: rgb(255,235,235);\n" +
                "            border: rgb(250,204,198) solid 1px;\n" +
                "            background-image: url(\"./static/jingdong-icons.png\");\n" +
                "            overflow: clip;\n" +
                "            background-repeat: no-repeat;\n" +
                "            background-position: -94px -46px;\n" +
                "        }\n" +
                "        input{\n" +
                "            border: none;\n" +
                "            outline: none;\n" +
                "        }\n" +
                "        /*input:focus{*/\n" +
                "        /*    border: #BBBBBB solid 1px;*/\n" +
                "        /*}*/\n" +
                "        .nameC, .psdC{\n" +
                "            display: flex;\n" +
                "            border: #BBBBBB solid 1px;\n" +
                "            width: 300px;\n" +
                "            margin: auto;\n" +
                "            flex-direction: row-reverse;\n" +
                "        }\n" +
                "        .userIcon{\n" +
                "            background-image: url(\"./static/jingdong-icons.png\");\n" +
                "            overflow: clip;\n" +
                "            width: 38px;\n" +
                "            height: 38px;\n" +
                "            background-position: left top;\n" +
                "            border-right:  #BBBBBB solid 1px;\n" +
                "            background-repeat: no-repeat;\n" +
                "        }\n" +
                "        .nameIn, .psdIn{\n" +
                "            width: 261px;\n" +
                "            border: none;\n" +
                "        }\n" +
                "        .nameIn:focus +.userIcon{\n" +
                "            background-image: url(\"./static/jingdong-icons.png\");\n" +
                "            overflow: clip;\n" +
                "            background-position: 0px -48px;\n" +
                "            color: bisque;\n" +
                "        }\n" +
                "\n" +
                "        .psdIn:focus +.psdIcon{\n" +
                "            background-image: url(\"./static/jingdong-icons.png\");\n" +
                "            overflow: clip;\n" +
                "            background-position: -48px -48px;\n" +
                "            color: bisque;\n" +
                "        }\n" +
                "\n" +
                "        .psdC{\n" +
                "            margin-top: 20px;\n" +
                "        }\n" +
                "        .psdIcon{\n" +
                "            background-image: url(\"./static/jingdong-icons.png\");\n" +
                "            overflow: clip;\n" +
                "            width: 38px;\n" +
                "            height: 38px;\n" +
                "            border-right:  #BBBBBB solid 1px;\n" +
                "            background-position-x: -48px;\n" +
                "            background-repeat: no-repeat;\n" +
                "        }\n" +
                "        .submit{\n" +
                "            width: 300px;\n" +
                "            height: 34px;\n" +
                "            background-color: #E5383C;\n" +
                "            border: #C96361 solid 1px;\n" +
                "            color: white;\n" +
                "            margin-left: auto;\n" +
                "            margin-right: auto;\n" +
                "            margin-top: 30px;\n" +
                "        }\n" +
                "        .submit a{\n" +
                "            display: block;\n" +
                "            text-decoration: none;\n" +
                "            color: inherit;\n" +
                "            text-align: center;\n" +
                "            line-height: 34px;\n" +
                "        }\n" +
                "        .psdCError{\n" +
                "            border: #E5383C solid 1px;\n" +
                "        }\n" +
                "        .psdIconError{\n" +
                "            background-image: url(\"./static/jingdong-icons.png\");\n" +
                "            overflow: clip;\n" +
                "            width: 38px;\n" +
                "            height: 38px;\n" +
                "            border-right:  #E5383C solid 1px;\n" +
                "            background-position: -48px -96px;\n" +
                "            background-repeat: no-repeat;\n" +
                "        }\n" +
                "        .nameIconError{\n" +
                "            background-image: url(\"./static/jingdong-icons.png\");\n" +
                "            overflow: clip;\n" +
                "            width: 38px;\n" +
                "            height: 38px;\n" +
                "            border-right:  #E5383C solid 1px;\n" +
                "            background-position: 0px -96px;\n" +
                "            background-repeat: no-repeat;\n" +
                "        }\n" +
                "    </style>\n" +
                "    <script>\n" +
                "        function sendRequest(params, succ, error){\n" +
                "            const xhr = new XMLHttpRequest();\n" +
                "            xhr.open(\"post\", \"/TomcatDemo/LoginServlet\");\n" +
                "            // post请求必须设置此头信息,告诉服务器是以表单形式提交数据 参数格式是 键值对的形式 用&隔开\n" +
                "            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');\n" +
                "            // 告诉服务器是以json的形式提交数据\n" +
                "            xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8');\n" +
                "            xhr.send(params);\n" +
                "            xhr.onreadystatechange = function () {\n" +
                "                if (this.readyState === 4) {\n" +
                "                    if (this.status >= 200 && this.status < 300) {\n" +
                "                        succ(this.responseText);\n" +
                "                    }else {\n" +
                "                        error(this.status, this.responseText);\n" +
                "                    }\n" +
                "                }\n" +
                "            }\n" +
                "\n" +
                "        }\n" +
                "\n" +
                "        function loadData(params){\n" +
                "            return new Promise((resolve, reject)=>{\n" +
                "                const xhr = new XMLHttpRequest();\n" +
                "                xhr.open(\"post\", \"/TomcatDemo/LoginServlet\");\n" +
                "                // post请求必须设置此头信息,告诉服务器是以表单形式提交数据 参数格式是 键值对的形式 用&隔开\n" +
                "                // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');\n" +
                "                // 告诉服务器是以json的形式提交数据\n" +
                "                xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8');\n" +
                "                xhr.send(params);\n" +
                "                xhr.onreadystatechange = function () {\n" +
                "                    if (this.readyState === 4) {\n" +
                "                        if (this.status >= 200 && this.status < 300) {\n" +
                "                            resolve(this.responseText);\n" +
                "                        }else {\n" +
                "                            reject(this.status);\n" +
                "                        }\n" +
                "                    }\n" +
                "                }\n" +
                "            })\n" +
                "        }\n" +
                "\n" +
                "\n" +
                "        window.onload = function () {\n" +
                "            let psdIn = document.getElementById(\"psdIn\");\n" +
                "            let psdCID = document.getElementById(\"psdCID\");\n" +
                "            let psdIconID = document.getElementById(\"psdIconID\");\n" +
                "            psdIn.onblur = function () {\n" +
                "                // 判断密码框内是否有值,如果没有值需要有提示框\n" +
                "                let psdValue = psdIn.value;\n" +
                "                if (psdValue){\n" +
                "                    // 有值\n" +
                "                    psdCID.classList.remove(\"psdCError\")\n" +
                "                    psdIconID.classList.remove(\"psdIconError\")\n" +
                "                }else {\n" +
                "                    // 空值\n" +
                "                    console.log(\"密码空值\");\n" +
                "                    psdCID.classList.add(\"psdCError\")\n" +
                "                    psdIconID.classList.add(\"psdIconError\")\n" +
                "                }\n" +
                "            }\n" +
                "            psdIn.onfocus = function () {\n" +
                "                psdCID.classList.remove(\"psdCError\")\n" +
                "                psdIconID.classList.remove(\"psdIconError\")\n" +
                "            }\n" +
                "\n" +
                "            let nameC = document.getElementById(\"nameC\");\n" +
                "            let nameIn = document.getElementById(\"nameIn\");\n" +
                "            let userIcon = document.getElementById(\"userIcon\");\n" +
                "            nameIn.onblur = function () {\n" +
                "                // 判断用户名框内是否有值,如果没有值需要有提示框\n" +
                "                let nameValue = nameIn.value;\n" +
                "                if (nameValue){\n" +
                "                    // 有值\n" +
                "                    console.log(\"123123\")\n" +
                "                    nameC.classList.remove(\"psdCError\")\n" +
                "                    userIcon.classList.remove(\"nameIconError\")\n" +
                "                }else {\n" +
                "                    // 空值\n" +
                "                    console.log(\"密码空值\");\n" +
                "                    nameC.classList.add(\"psdCError\")\n" +
                "                    userIcon.classList.add(\"nameIconError\")\n" +
                "                }\n" +
                "            }\n" +
                "            nameIn.onfocus = function () {\n" +
                "                nameC.classList.remove(\"psdCError\")\n" +
                "                userIcon.classList.remove(\"nameIconError\")\n" +
                "            }\n" +
                "            let errorHint = document.getElementById(\"errorHint\");\n" +
                "            const elementById = document.getElementById(\"submit\");\n" +
                "            elementById.onclick = function (){\n" +
                "                // 登录 ajax\n" +
                "                if (!nameIn.value){\n" +
                "                    // 用户名为空\n" +
                "                    errorHint.innerHTML = \"请输入用户名\"\n" +
                "                    errorHint.style.visibility = \"visible\";\n" +
                "                }else if (!psdIn.value){\n" +
                "                    errorHint.innerHTML = \"请输入密码\"\n" +
                "                    errorHint.style.visibility = \"visible\";\n" +
                "                }else {\n" +
                "                    errorHint.style.visibility = \"hidden\";\n" +
                "                    // 发送ajax请求到服务器实现登录\n" +
                "                    // let params = \"user=\" + nameIn.value+\"&psd=\"+psdIn.value;\n" +
                "                    let params ={};\n" +
                "                    params.user=nameIn.value;\n" +
                "                    params.psd=psdIn.value;\n" +
                "\n" +
                "                    aLoad(JSON.stringify(params))\n" +
                "\n" +
                "                    // sendRequest(JSON.stringify(params), (data)=>{\n" +
                "                    //     let result = JSON.parse(data);\n" +
                "                    //     if (result.code === 200) {\n" +
                "                    //         //服务器处理成功\n" +
                "                    //         if (result.data.token) {\n" +
                "                    //             // 登录成功,跳转到首页\n" +
                "                    //             errorHint.style.visibility = \"hidden\";\n" +
                "                    //             psdCID.classList.remove(\"psdCError\")\n" +
                "                    //             psdIconID.classList.remove(\"psdIconError\")\n" +
                "                    //             nameC.classList.remove(\"psdCError\")\n" +
                "                    //             userIcon.classList.remove(\"nameIconError\")\n" +
                "                    //             window.location.href = \"./index.jsp\";\n" +
                "                    //         }else {\n" +
                "                    //             // token是空,登录失败,需要提醒用户\n" +
                "                    //             errorHint.innerHTML = result.msg;\n" +
                "                    //             errorHint.style.visibility = \"visible\";\n" +
                "                    //             psdCID.classList.add(\"psdCError\")\n" +
                "                    //             psdIconID.classList.add(\"psdIconError\")\n" +
                "                    //             nameC.classList.add(\"psdCError\")\n" +
                "                    //             userIcon.classList.add(\"nameIconError\")\n" +
                "                    //         }\n" +
                "                    //     }else {\n" +
                "                    //         // 服务器端报错,需要提醒用户\n" +
                "                    //         errorHint.innerHTML = result.msg;\n" +
                "                    //         errorHint.style.visibility = \"visible\";\n" +
                "                    //         psdCID.classList.add(\"psdCError\")\n" +
                "                    //         psdIconID.classList.add(\"psdIconError\")\n" +
                "                    //         nameC.classList.add(\"psdCError\")\n" +
                "                    //         userIcon.classList.add(\"nameIconError\")\n" +
                "                    //     }\n" +
                "                    // }, (code, msg)=>{\n" +
                "                    //     console.log(\"响应码:\",code,msg)\n" +
                "                    // });\n" +
                "                }\n" +
                "            }\n" +
                "\n" +
                "\n" +
                "            async function aLoad(params){\n" +
                "                let data = await loadData(params);\n" +
                "                let result = JSON.parse(data);\n" +
                "                if (result.code === 200) {\n" +
                "                    //服务器处理成功\n" +
                "                    if (result.data.token) {\n" +
                "                        // 登录成功,跳转到首页\n" +
                "                        errorHint.style.visibility = \"hidden\";\n" +
                "                        psdCID.classList.remove(\"psdCError\")\n" +
                "                        psdIconID.classList.remove(\"psdIconError\")\n" +
                "                        nameC.classList.remove(\"psdCError\")\n" +
                "                        userIcon.classList.remove(\"nameIconError\")\n" +
                "                        console.log(\"登录成功======\")\n" +
                "                        window.location.href = \"./index.jsp\";\n" +
                "                    }else {\n" +
                "                        // token是空,登录失败,需要提醒用户\n" +
                "                        errorHint.innerHTML = result.msg;\n" +
                "                        errorHint.style.visibility = \"visible\";\n" +
                "                        psdCID.classList.add(\"psdCError\")\n" +
                "                        psdIconID.classList.add(\"psdIconError\")\n" +
                "                        nameC.classList.add(\"psdCError\")\n" +
                "                        userIcon.classList.add(\"nameIconError\")\n" +
                "                    }\n" +
                "                }else {\n" +
                "                    // 服务器端报错,需要提醒用户\n" +
                "                    errorHint.innerHTML = result.msg;\n" +
                "                    errorHint.style.visibility = \"visible\";\n" +
                "                    psdCID.classList.add(\"psdCError\")\n" +
                "                    psdIconID.classList.add(\"psdIconError\")\n" +
                "                    nameC.classList.add(\"psdCError\")\n" +
                "                    userIcon.classList.add(\"nameIconError\")\n" +
                "                }\n" +
                "            }\n" +
                "        }\n" +
                "    </script>\n" +
                "</head>\n" +
                "<body>\n" +
                "\n" +
                "<div class=\"root\">\n" +
                "    <div id=\"errorHint\">\n" +
                "    </div>\n" +
                "\n" +
                "    <div id=\"nameC\" class=\"nameC\">\n" +
                "        <input id=\"nameIn\" class=\"nameIn\" type=\"text\" autofocus placeholder=\"请输入用户名\">\n" +
                "        <div id=\"userIcon\" class=\"userIcon\"></div>\n" +
                "    </div>\n" +
                "\n" +
                "    <div id=\"psdCID\" class=\"psdC\">\n" +
                "        <input id=\"psdIn\" class=\"psdIn\" type=\"password\" placeholder=\"请输入密码\">\n" +
                "        <div id=\"psdIconID\" class=\"psdIcon\"></div>\n" +
                "    </div>\n" +
                "\n" +
                "    <div id=\"submit\" class=\"submit\" ><a href=\"#\">登录</a></div>\n" +
                "</div>\n" +
                "</body>\n" +
                "</html>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }

    @Override
    public void destroy() {
        super.destroy();
        System.out.println("destroy 方法执行了");
    }
}
